<template>
    <div>
        <div style="display: flex;flex-direction: row;flex-wrap: wrap;">
            <el-date-picker v-model="page.time" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" size="small" style="width: 200px;margin: 5px;" value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>

            <el-input v-model="page.url" placeholder="请输入url" clearable size="small" style="width: 200px;margin: 5px;"></el-input>
            <el-input v-model="page.user" placeholder="请输入用户名" clearable size="small" style="width: 200px;margin: 5px;"></el-input>

            <el-button type="primary" size="small" @click="handleSearch" style="margin: 5px;">搜索</el-button>




        </div>
    
    <el-table :data="tableData"  :height="tblheight" >
        <el-table-column prop="user" label="用户" width="110" align="center">
        </el-table-column>
        <!-- <el-table-column prop="agent" label="代理" width="180">
        </el-table-column> -->
        <el-table-column prop="ip" label="IP" align="center" width="100" v-if="tblpppshow">
        </el-table-column>
        <el-table-column prop="requestMethod" label="请求方式" align="center" width="80" v-if="tblpppshow">
        </el-table-column>
        <el-table-column prop="url" label="URL" align="center">
        </el-table-column>
        <!-- <el-table-column prop="parameter" label="参数">
        </el-table-column> -->
        <el-table-column prop="status" label="状态" align="center" width="50" v-if="tblpppshow">
        </el-table-column>
        <el-table-column prop="requestTime" label="请求时间" align="center" width="150" v-if="tblpppshow">
            <template slot-scope="scope">
       
          {{ scope.row.requestTime.split(" ")[0]+" "+scope.row.requestTime.split(" ")[1].split(":")[0]+":"+scope.row.requestTime.split(" ")[1].split(":")[1] }}
      </template>
        </el-table-column>
        <el-table-column prop="useTime" label="用时" align="center" width="50" v-if="tblpppshow">
        </el-table-column>
    </el-table>

    <el-pagination style="margin-top: 10px;" :current-page.sync="page.current" :page-sizes="[5, 10, 20, 50]"
        :page-size.sync="page.pageSize" :layout="layout" :total="total" :small="!tblpppshow" @size-change="refresh" @current-change="refresh" >
    </el-pagination>
    </div>
</template>

<script>
import { getPageList } from "@/api/operationLog"
export default {
    name: "operationLog",
    data() {
        return {
            tblpppshow:true,
            layout:"total, sizes, prev, pager, next, jumper",
            tblheight:500,
            tableData: [],
            total: 0,
            page: {
                "current": 1,
                "pageSize": 10,
                "time": [],
                "url": "",
                "user": ""
            }

        }
    },
    mounted() {
		this.handleResize();
		window.addEventListener('resize', this.handleResize);
	},
    created() {
        this.refresh()
    },
    methods: {
        handleResize() {
			if (document.body.clientWidth < 768) {
				
				this.layout = "prev, pager, next"
                this.tblpppshow=false
			} else {
                this.layout ="total, sizes, prev, pager, next, jumper"
                this.tblpppshow=true
			}
            // this.tblheight=document.body.clientHeight*0.8
		},
        handleSearch(){
            this.page.current=1;
            this.refresh()
        },
        refresh() {
            getPageList(this.page).then(res => {
                if (res.code == 200) {
                    this.tableData = res.data.records;
                    this.total = res.data.total
                } else {
                    this.$message.error(res.message)
                }
            })
        }
    }
};
</script>

<style>
html,body{
    height: 100vh;
}
</style>